<template>
  <div id="gauge" :style="{height:height,width:width}" ref="gauge"></div>
</template>

<script>

/**
 * 转速表1
 */
export default {
  name: 'gauge',
  props: {
    value: {
      type: String,
      default: '30'
    },
    title: {
      type: String,
      default: '标题'
    },
    unit: {
      type: String,
      default: '单位'
    },
    min: {
      type: String,
      default: '0'
    },
    max: {
      type: String,
      default: '100'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    }
  },
  mounted() {
    this.getGauge()
  },
  methods: {
    getGauge() {
      const chartDom = this.$refs.gauge
      // console.log('echarts ', this.$echarts)
      const myChart = this.$echarts.init(chartDom)
      let option

      // 配置项
      option = {
        series: [
          {
            min: parseFloat(this.min),
            max: parseFloat(this.max),
            type: 'gauge',
            axisLine: {
              lineStyle: {
                // 宽度
                width: 20,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'inherit'
              }
            },
            axisTick: {
              distance: -30,
              // 刻度，值越大，刻度线越长
              length: 16,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 30,
              fontSize: 15
            },
            detail: {
              valueAnimation: true,
              formatter: `{value} ${this.unit}`,
              color: 'inherit',
              // 数值 单位字体大小
              fontSize: 14
            },
            // 设置仪表盘中间显示文字样式
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            title: {
              textStyle: {
                fontWeight: 'bolder',
                color: 'inherit',
                // 标题大小
                fontSize: 12
              }
            },
            data: [
              {
                value: this.value,
                name: this.title
              }
            ]
          }
        ]
      }
      // 调用option配置
      option && myChart.setOption(option)

      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}

</script>